<!--首页的票房排行-->
<template>
  <div>
    <div class="tab">
      <div class="yuan common" :class="active === 1 ? 'active': ''" ﻿@tap="clickSwitch(1)">
        <span>院线电影</span>
      </div>
      <div class="pin"></div>
      <div class="net common" :class="active === 2 ? 'active': ''" ﻿@tap="clickSwitch(2)">
        <span>网络电影</span>
      </div>
    </div>
    <table class="network" v-if="active===1">
      <tr>
        <th>影片</th>
        <th>综合票房(万)</th>
        <th>票房占比</th>
      </tr>
      <tr class="network-tableContent" v-for="(item,index) in networkMovie" :key="index">
        <td class="cinemas-title">
          <p>{{item.movieName}}</p>
          <div>
            <p>{{item.releaseInfo}}</p>
            <p>{{item.sumBoxInfo}}</p>
          </div>
        </td>
        <td>{{item.boxInfo}}</td>
        <td>{{item.boxRate}}</td>
      </tr>
    </table>
    <table class="network" v-else>
      <tr>
        <th>影片</th>
        <th>播放平台</th>
        <th>全网热度</th>
      </tr>
      <tr class="network-tableContent" v-for="(item,index) in networkMovie" :key="index">
        <td class="cinemas-title">
          <p>{{item.name}}</p>
            <span class="cinemas-title-days">上映{{item.days}}日</span>
        </td>
        <td>
			<img :src="item.platformImgs[0]" class="playPlatformLogo" alt="">
		</td>
        <td>{{item.gdi}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
    export default {
        name: "index",
      props:{
        networkMovie:{
          type: Array
        },
		active:{
			type: Number,
			default: 1
		}
      },
      methods:{
        clickSwitch(state){
          this.$emit("changeSwitch", state);
        }
      }
    }
</script>

<style scoped>
  .pin{
    z-index: 10;
    position: absolute;
    left: 46%;
    width: 50rpx;
    height: 92rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    text-decoration: none;
    transform: skewX(-30deg);
  }
  .tab{
    display: flex;
    position: relative;
  }
  .common{
    position: relative;
    flex: 1;
    height:88rpx;
    background:linear-gradient(270deg,rgba(192,192,192,1) 0%,rgba(222,223,224,1) 100%);
    box-shadow:0 2rpx 5rpx 0rpx rgba(145,145,148,0.38);
  }
  .common span{
    position: absolute;
    font-size:30rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,255,255,1);
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.yuan{
  border-radius:49rpx 10rpx 10rpx 49rpx;
}
  .net{
    border-radius: 10rpx 49rpx 49rpx 10rpx;
  }
  .active{
    background:linear-gradient(270deg,rgba(239,90,86,1) 0%,rgba(255,157,154,1) 100%);
    box-shadow:0 2rpx 5rpx 0rpx rgba(250,80,75,0.38);
  }

  .cinemas-title>div{
    display: flex;
  }
  .cinemas-title>p{
    font-size: 24rpx;
    color: #323232;
    margin-bottom: 16rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .cinemas-title>div>p:first-child{
    font-size: 18rpx;
    color: #EF5E56;
  }
  .cinemas-title>div>p:last-child{
    font-size: 18rpx;
    color: #969696;
    margin-left: 10rpx;
  }
  .cinemas-title-days{
	  font-size: 18rpx;
	  color: #EF5E56;
	  margin: 0;
  }
  .network th{
    font-size: 24rpx;
    color: #323232;
  }
  .network th:nth-of-type(1){
    width: 40%;
  }
  .network th:nth-of-type(2){
    text-align: center;
    width: 22%;
  }
  .network th:nth-of-type(3){
    width: 25%;
    text-align: center;
  }
  .network>tr{
    height: 98rpx;
    font-size: 24rpx;
  }
  .network>tr:nth-child(even){
    background-color: #fbfbfb;
  }
  .network>tr:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .network td:nth-of-type(1){
    width: 40%;
  }
  .network td:nth-of-type(2){
    width: 22%;
    color: #EF5E56;
    text-align: center;
  }
  .network td:nth-of-type(3){
    width: 25%;
    text-align: center;
  }
  .network-tableContent{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .playPlatformLogo{
	  width: 40rpx;
	  height: 40rpx;
  }
</style>
